<template>
  <div :class="className" :style="{height:height,width:width}" ref="chartRef" />
</template>

<script setup>
import * as echarts from 'echarts'
import useResize from '@/components/Echarts/Composable/resize'

// 引入echarts主题
import 'echarts/theme/dark'

const props = defineProps({
  className: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '350px'
  },
  autoResize: {
    type: Boolean,
    default: true
  },
  legendNames: {
    type: Array,
    default: () => ['']
  },
  colors: {
    type: Array,
    default: () => []
  },
  legendColor: {
    type: String,
    default: ''
  },
  xAxisNames: {
    type: Array,
    default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  axisLineColor: {
    type: String,
    default: '#333'
  },
  axisColor: {
    type: String,
    default: '#333'
  },
  areaGradientColor: {
    type: Array,
    default: null
  },
  chartData: {
    type: Array,
    default: () => [[]]
  },
  lazy: {
    type: Boolean,
    default: false
  },
  smooth: {
    type: Boolean,
    default: true
  }
})

const chartRef = ref(null)
const chart = shallowRef(null)
const loaded = ref(false)

// 使用resize组合式API
useResize(chart)

// 生成图表系列数据
const generateSeries = (chartData) => {
  const series = []
  for (let i = 0 ; i < chartData.length ; i++) {
    const serie = {
      name: props.legendNames[i],
      type: 'line',
      data: chartData[i],
      smooth: props.smooth,
      animationDuration: 2800,
      animationEasing: 'cubicInOut'
    }

    if (props.colors && props.colors.length === props.legendNames.length) {
      serie.itemStyle = {
        color: props.colors[i]
      }
      serie.lineStyle = {
        color: props.colors[i],
        width: 2
      }
    }

    if (props.areaGradientColor) {
      serie.areaStyle = {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, props.areaGradientColor)
      }
    }
    series.push(serie)
  }
  return series
}

// 设置图表选项
const setOptions = (chartData) => {
  let maxValue = Math.max(...chartData.chartData.flat())
  maxValue *= 2
  chart.value.setOption({
    legend: {
      data: props.legendNames,
      textStyle: {
        color: props.legendColor || '#333'
      }
    },
    xAxis: {
      data: chartData.xAxisNames,
      boundaryGap: false,
      axisTick: {
        show: false
      },
      axisLine: {
        show: props.axisLineColor !== '',
        lineStyle: {
          color: props.axisLineColor
        }
      },
      axisLabel: {
        color: props.axisColor
      }
    },
    yAxis: {
      splitLine: false,
      axisTick: {
        show: false
      },
      axisLine: {
        show: props.axisLineColor !== '',
        lineStyle: {
          color: props.axisLineColor
        }
      },
      axisLabel: {
        color: props.axisColor
      },
      max: maxValue
    },
    grid: {
      top: 30,
      left: '2%',
      right: '2%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    series: generateSeries(chartData.chartData)
  })
}

// 加载图表
const loadChart = (chartData) => {
  if (!props.lazy) {
    chart.value = echarts.init(chartRef.value)
  } else {
    if (!loaded.value) {
      chart.value = echarts.init(chartRef.value)
      loaded.value = true
    }
  }
  setOptions(chartData)
}

// 监听数据变化
watch(() => props.chartData, () => {
  if (!props.lazy) {
    setOptions({
      xAxisNames: props.xAxisNames,
      chartData: props.chartData
    })
  }
}, {deep: true})

// 生命周期钩子
onMounted(() => {
  nextTick(() => {
    if (!props.lazy) {
      loadChart({
        xAxisNames: props.xAxisNames,
        chartData: props.chartData
      })
    }
  })
})

onBeforeUnmount(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})
defineExpose({
  loadChart
})
</script>
